<template>
    <div>
        <div class="text-xl ">【数据云图】</div>
        <div ref="chart" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import 'echarts-wordcloud'
// import '@/utils/echarts-wordcloud.min.js'
let mychart = null
const chart = ref(null)
const props = defineProps(['data'])
const getColor = () => {
    const r = Math.floor(Math.random() * 255)
    const g = Math.floor(Math.random() * 255)
    const b = Math.floor(Math.random() * 255)
    return `rgb(${r},${b},${b})`

}
const option = ref({
    series: {
        type: 'wordCloud',
        sizeRange: [8, 50],
        rotationRange: [0, 0],
        gridSize: 0,
        layoutAnimation: true,
        textStyle: {
            color: getColor()
        },
        data: props.data.datas
    }
})

const initChart = () => {
    mychart.setOption(option.value)
}
onMounted(() => {
    mychart = echarts.init(chart.value)
    initChart()
})
</script>

<style lang="scss" scoped></style>